<template>
  <el-dialog
    title="裁剪头像"
    :visible.sync="dialogVisible"
    :show-close="false"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    @close="closeDialog"
    width="600px"
  >
    <div class="avatar-container">
      <!-- 待上传图片 -->
      <div v-show="!options.img">
        <el-upload
          class="upload"
          ref="upload"
          action=""
          :on-change="upload"
          accept="image/png, image/jpeg, image/jpg"
          :show-file-list="false"
          :auto-upload="false"
        >
          <el-button
            slot="trigger"
            size="small"
            type="primary"
            ref="uploadBtn"
          >
            选择图片
          </el-button>
        </el-upload>
        <div>支持jpg、png格式的图片，大小不超过5M</div>
      </div>
      <!-- 已上传图片 -->
      <div
        v-show="options.img"
        class="avatar-crop"
      >
        <vueCropper
          v-if="dialogVisible"
          class="crop-box"
          ref="cropper"
          :img="options.img"
          :autoCrop="options.autoCrop"
          :fixedBox="options.fixedBox"
          :canMoveBox="options.canMoveBox"
          :autoCropWidth="options.autoCropWidth"
          :autoCropHeight="options.autoCropHeight"
          :centerBox="options.centerBox"
          :fixed="options.fixed"
          :fixedNumber="options.fixedNumber"
          :canMove="options.canMove"
          :canScale="options.canScale"
        ></vueCropper>
      </div>
    </div>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <div
        class="reupload"
        @click="reupload"
      >
        <span v-show="options.img">重新上传</span>
      </div>
      <div>
        <el-button @click="closeDialog">取 消</el-button>
        <el-button
          type="primary"
          @click="getCrop"
        >确 定</el-button>
      </div>
    </span>
  </el-dialog>
</template>
 
<script>
import { VueCropper } from 'vue-cropper'
//引入腾讯云组件
import COS from 'cos-js-sdk-v5'
const cos = new COS({
  SecretId: 'AKIDd5IEtHNDm45pIUP3QWLs99sJVP2OUJr7',
  SecretKey: '0jCOKzNUKuCDxQdZDagogHcgTzDAqFNF'
})
export default {
  components: {
    VueCropper
  },
  name: 'avatarCropper',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      fileList: [], // 图片地址设置为数组 
      // vueCropper组件 裁剪配置信息
      options: {
        img: '', // 原图文件
        autoCrop: true, // 默认生成截图框
        fixedBox: false, // 固定截图框大小
        canMoveBox: true, // 截图框可以拖动
        autoCropWidth: 200, // 截图框宽度
        autoCropHeight: 200, // 截图框高度
        fixed: true, // 截图框宽高固定比例
        fixedNumber: [1, 1], // 截图框的宽高比例
        centerBox: true, // 截图框被限制在图片里面
        canMove: false, // 上传图片不允许拖动
        canScale: false // 上传图片不允许滚轮缩放
      }
    }
  },

  methods: {
    // 读取原图
    upload(file) {
      const isIMAGE = file.raw.type === 'image/jpeg' || file.raw.type === 'image/png'
      const isLt5M = file.raw.size / 1024 / 1024 < 5
      if (!isIMAGE) {
        this.$message({
          showClose: true,
          message: '请选择 jpg、png 格式的图片',
          type: 'warning'
        })
        return false
      }
      if (!isLt5M) {
        this.$message({
          showClose: true,
          message: '图片大小不能超过 5MB',
          type: 'warning'
        })
        return false
      }
      let reader = new FileReader()
      reader.readAsDataURL(file.raw)
      reader.onload = e => {
        this.options.img = e.target.result // base64
      }
    },
    // 获取截图信息
    getCrop() {
      // 获取截图的 base64 数据
      // this.$refs.cropper.getCropData((data) => {
      //   this.$emit('closeAvatarDialog', data)
      //   this.closeDialog()
      // });
      
      // 获取截图的 blob 数据
      this.$refs.cropper.getCropBlob(data => {
        
        
        console.log(data.size);
        //上传腾讯云
        cos.putObject({
          Bucket: 'img-1312839128', /* 填入您自己的存储桶，必须字段 */
          Region: 'ap-nanjing',  /* 存储桶所在地域，例如ap-beijing，必须字段 */
          Key: data.size+".jpg",  /* 存储在桶里的对象键（例如1.jpg，a/b/test.txt），必须字段 */
          Body: data,
          StorageClass: 'STANDARD',
          
        },  (err, data) =>{
          console.log(err || data);
           //data返回数据之后 应该如何处理
          //console.log(err || data);
          // data中有一个statusCode === 200 的时候说明上传成功
          if (!err && data.statusCode === 200) {
            //此时说明文件上传成功 要获取成功的返回地址
            //fileList 才能显示到上传组件上 此时我们要将fileList中的数据的url地址变成 现在上传成功的地址
            //目前虽然时一张图片 但是请注意 我们的fileList 是一个数组
            //需要知道当前上传成功的时哪一张图片
            
              this.fileList=[{ url: 'http://' + data.Location, upload: true }]
              this.$emit('closeAvatarDialog',this.fileList)
              
              
             //upload 为true 表示这张图片已经上传完毕  这个属性要为我们后期应用的时候做标记
            //保存 => 图片有大有小 => 上传的速度有快有慢 => 要根据有没有upload这个标记来决定是否去保存
          }
        });
        this.closeDialog() //关闭弹层 
        //this.$emit('closeAvatarDialog', this.fileList)
       
      })



    },
    // 重新上传
    reupload() {
      this.$refs.uploadBtn.$el.click()
    },
    // 关闭弹框
    closeDialog() {
      this.$emit('update:dialogVisible', false)
      this.options.img = ''
    }
  }
}
</script>
 
<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  .reupload {
    color: #409eff;
    cursor: pointer;
  }
}
.avatar-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 560px;
  height: 400px;
  background-color: #f0f2f5;
  margin-right: 10px;
  border-radius: 4px;
  .upload {
    text-align: center;
    margin-bottom: 24px;
  }
  .avatar-crop {
    width: 560px;
    height: 400px;
    position: relative;
    .crop-box {
      width: 100%;
      height: 100%;
      border-radius: 4px;
      overflow: hidden;
    }
  }
}
</style>
